<template>
  <div class="collapse-item">
    <div class="collapse-title" @click="toggle">
      {{ title }}
    </div>
    <div class="collapse-content" v-if="sclect() && open">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { inject, Ref, ref } from "vue";
export default {
  props: {
    title: {
      type: String,
      default: "xxx",
    },
    only: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const sclected = inject<Ref>("sclected");
    const open = ref(false);
    const sclect = () => {
      if (props.only && sclected.value !== props.title) {
        open.value = false;
      }

      if (!props.only) {
        return true;
      }
      return sclected.value === props.title;
    };
    const toggle = () => {
      open.value = !open.value;
      sclected.value = props.title;
    };
    return {
      open,
      toggle,
      sclected,
      sclect,
    };
  },
};
</script>

<style lang='scss'>
.collapse-item {
  > .collapse-title {
    border: 1px solid gray;
    margin-top: -1px;
    margin-left: -1px;
    margin-right: -1px;
    min-height: 32px;
    display: flex;
    align-items: center;
    padding-left: 8px;
  }

  &:first-child {
    > .collapse-title {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
  }
  &:last-child {
    > .collapse-title:last-child {
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }
}
.collapse-content {
  padding-left: 8px;
  display: flex;
}
</style>